<template>
<div class="title">我的订单</div>
<div class="orderList">
  <ul>
    <li v-for="(order, index) in pageInfo.list" :key="index">
      <!-- 头部 -->
      <div class="header">
        <div class="orderId">订单ID：{{order.id}}</div>
        <div class="addrDetail">地址：{{order.addrDetail}}</div>
      </div>
      <!-- 详情、状态 -->
      <div class="orderDetail">
        <el-row>
          <!--商品信息-->
          <el-col :span="16">
            <div class="goodsInfo" v-for="(orderDetail, index) in order.orderDetailList" :key="index">
              <el-row>
                <el-col :span="3">
                  <!-- 图片 -->
                  <el-image
                      fit="contain"
                      style="width: 50px; height: 50px"
                      :src="`${SERVER_ADDR}/goods/pic/${orderDetail.goods.picList[0].url}`"/>
                </el-col>
                <el-col :span="19">
                  <!-- 商品信息 -->
                  {{orderDetail.goods.name}} {{orderDetail.goods.color}} {{orderDetail.goods.version}} {{orderDetail.price}} X {{orderDetail.count}}
                </el-col>
              </el-row>
            </div>
          </el-col>
          <!--状态 操作-->
          <el-col :span="8">
            <div v-if="order.status == 0">
              <el-button type="warning" @click="toPay(order.id)">立即付款</el-button>
            </div>
            <div v-else style="margin-bottom: 10px">
              <el-tag type="success">
                {{["未支付","已支付","已发货","已收货","退货退款","退换货","仅退款","售后","其它"][order.status]}}
              </el-tag>
            </div>
            <div v-if="order.status == 2">
              <el-button type="success" @click="updateOrderStatus(order.id, order.status)">确认收货</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </li>
  </ul>
</div>
<div class="pageNav">
  <el-row justify="center">
    <el-pagination background layout="prev, pager, next"
                   :page-count="pageInfo.pages"
                   @update:current-page="selectByUser"
                   style="margin-top: 10px; text-align: center"
                   v-model:current-page="pageInfo.pageNum" />
  </el-row>

</div>
</template>

<script setup>
//当前用户的所有购物车信息
import {ref} from "vue";
import orderApi from "@/api/orderApi.js";
import {Delete} from "@element-plus/icons-vue";
import {ElMessage} from "element-plus";
import {useRouter} from "vue-router";

const  router = useRouter();
//服务器的地址
const SERVER_ADDR = ref(import.meta.env.VITE_SERVER_ADDR);
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
})
const selectByUser = (pageNum) => {
  orderApi.selectByUserAll(pageNum,5)
      .then(resp => {
        if (resp.code == 10000) {
          pageInfo.value = resp.data;
        }else {
          ElMessage.error(resp.msg);
        }
      })
}
const toPay = (id) => {
  router.push({
    path: '/user/pay',
    query: {
      orderId: id
    }
  })
}
//修改订单状态
const updateOrderStatus = (id, status) => {
  const order = {
    id: id,
    status: status+1
  }
  orderApi.update(order)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success("操作成功")
          selectByUser(1);
        }else {
          ElMessage.error("操作失败")
        }
      })
};
selectByUser(1);
</script>

<style scoped>
.title {
  font-weight: bold;
  font-size: 18px;
}
.orderList, .pageNav {
  margin: 10px 0;
  padding: 20px;
  border: 1px solid #222;
  background-color: #fff;
}
.orderList ul li {
  border: 1px solid black;
  margin-bottom: 10px;
  padding: 10px;
}

.orderList ul li .header {
  border-bottom: 1px solid black;
}
.orderList ul li .orderDetail {
  margin-top: 10px;
}

.orderList ul li .orderDetail {
  margin-top: 10px;
}
.orderList ul li .orderDetail .goodsInfo{
  margin-bottom: 10px;
  height: 50px;
  line-height: 50px;
}
.orderList ul li .header .orderId {
  font-size: 14px;
  color: #222;
}
.orderList ul li .header .addrDetail {
  font-size: 14px;
  color: var(--theme-color);
}

</style>